<template>
	<view class="content page-init">
		<!-- 自定义导航栏 -->
		<view>
			<view
				:style="{'height': statusBarHeight +'px','line-height': statusBarHeight+'px','background-color': 'none'}">
			</view>
			<view :style="{height: navHeight + 'px','line-height': navHeight + 'px'}" class="fb mt10"
				@click="handleToFamily">
				{{familyName}} <i class="icon f12 ml5">&#xe65f;</i>
			</view>
		</view>
		<!-- 天气位置 -->
		<view class="  f14 wather-box">
			<image src="../../static/mp-weixin/title.jpg" mode="scaleToFill" class="wather-img"></image>
			<!-- <view v-show="address">{{address}}<i class="icon f14 ml5 blue">&#xe60b;</i></view> -->
		</view>
		<!-- 设备tabbar -->
		<view class="mt10">
			<u-tabs :list="list" :gutter="0" active-color="#488bf6" :is-scroll="true" :current="current"
				@change="handleTabChange" :font-size="36" :bg-color="transparent"></u-tabs>
		</view>
		<u-line color="rgb(203,203,203)" />
		<view v-if="isLogin">
			<!-- 设备列表数据 -->
			<view class="dev-list-box">
				<u-row gutter="0">
					<u-col span="6" v-for="item in devList" :key="item.equipmentId">
						<view class="dev-item" @click="handleToMsg(item)">
							<view class="dev-icon">
								<!-- <i class="icon f24">&#xe640;</i> -->
							</view>
							<view class="dev-name">
								{{item.equipmentName}}
							</view>
							<view class="dev-name">
								{{item.uuid.length > 8?item.uuid.slice(8) : item.uuid }}
							</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<!-- 空数据 -->
			<view class="dev-empty" v-if="!devList.length">
				<view class="empty-img mt60"></view>
				<view class="btn f18 mt30" @click="handleAddDev">
					<i class="icon f12 mr5">&#xe889;</i>添加设备
				</view>
			</view>
		</view>
		<view v-else>
			<loginCom ref="loginCom" @success="handleLoginSuccess"></loginCom>
		</view>
		<!-- 	<button type="default" @click="handleDisconnent">断开连接</button>
		<button type="default" @click="handleInit">初始化</button>
		<button type="default" @click="handlePush">消息</button> -->
		<tabbar :index="1"></tabbar>
		<floatBtn @handleClickFloat="handleClickFloat" icon="&#xe889;" v-if="isLogin"></floatBtn>
		<message-modal ref="messageModal"></message-modal>
		<message-text ref="messageText"></message-text>
	</view>
</template>

<script>
	import * as Tools from "@/utils/uni-com.js"
	import * as Auth from "@/utils/wx-auth.js"
	import messageMixin from "@/mixins/messageMixin.js"
	import tabbar from '@/components/tabbar.vue'
	import floatBtn from '@/components/float-btn.vue'
	import loginCom from '@/components/login-com.vue'
	let App = getApp()
	export default {
		components: { tabbar, floatBtn, loginCom },
		mixins: [messageMixin],
		data() {
			return {
				title: 'Hello',
				statusBarHeight: '0',
				navHeight: '0',
				familyName: "我的家",
				latitude: '',
				longitude: '',
				list: [{
					name: '所有设备'
				}],
				current: 0,
				address: '',
				devList: [],
				isLogin: Auth.isLogin()
			}
		},
		onLoad(res) {
			console.log("进入onload函数index", Auth.isLogin())
			// 登录授权显示
			// if (Auth.isLogin()) {
			// 	const length = getCurrentPages().length;
			// 	const currentRoute = getCurrentPages()[length - 1].route;
			// 	let url = Tools.joinParams({ returnUrl: "/" + currentRoute }, '/pages/auth/auth');
			// 	uni.redirectTo({ url });
			// 	return
			// }
			let _menuInfo = uni.getMenuButtonBoundingClientRect();
			let _windowInfo = uni.getSystemInfo({
				success: (_windowInfo) => {
					let _navHeight = (_menuInfo.top - _windowInfo.statusBarHeight) * 2 + _menuInfo.height;
					console.log(_windowInfo);
					this.statusBarHeight = _windowInfo.statusBarHeight
					this.navHeight = _navHeight
				}
			})
			console.log(_windowInfo);
			// wx.showShareMenu({
			// 	withShareTicket: true,
			// 	menus: ['shareAppMessage', 'shareTimeline'],
			// 	success(res) {
			// 		console.log('showShareMenu', res);
			// 	}
			// })
		},
		onShow() {
			this.init();
		},
		// onShareAppMessage() {
		// 	console.log("fen1233")
		// },
		// onShareTimeline() {
		// 	console.log("fen")
		// },
		methods: {
			handleLoginSuccess() {
				this.init()
			},
			// goLogin() {
			// 	if (Auth.isLogin()) {
			// 		const length = getCurrentPages().length;
			// 		const currentRoute = getCurrentPages()[length - 1].route;
			// 		let url = Tools.joinParams({ returnUrl: "/" + currentRoute }, '/pages/auth/auth');
			// 		uni.navigateTo({ url });
			// 		return
			// 	}
			// },
			init() {
				this.isLogin = Auth.isLogin()
				App.setDevList([])
				this.devList = []
				this.familyName = "我的家"
				if (this.isLogin) {
					this.queryFamily()
					this.getDevList()
				}

				// this.queryWather()
			},
			queryWather() {
				// if (this.address) { return }
				// if (!this.latitude || !this.longitude) {
				// 	let self = this
				// 	wx.getSetting({
				// 		success(res) {
				// 			console.log(99999999, res);
				// 			// if (!res.authSetting['scope.userLocation']) {
				// 			wx.authorize({
				// 				scope: 'scope.userLocation',
				// 				success() {
				// 					console.log("已授权");
				// 					wx.getLocation({
				// 						type: 'wgs84',
				// 						success(res) {
				// 							let { latitude, longitude } = res
				// 							self.latitude = latitude
				// 							self.longitude = longitude
				// 							console.log("书籍=>", res)
				// 							self.getLocation(latitude + "," + longitude)
				// 						}
				// 					})
				// 				},
				// 				fail() {
				// 					console.log("未授权");
				// 				}
				// 			})
				// 			// }
				// 		}
				// 	});
				// }
			},
			queryFamily() {
				this.$api.queryFamily().then(res => {
					if (+res.code == 0) {
						res.data = res.data || {}
						this.familyName = res.data.familyName
					} else {
						uni.showToast({ title: res.msg, icon: 'none', })
					}
				}).catch(err => {
					uni.showToast({ title: `请求错误!`, icon: 'none', })
				})
			},
			getDevList() {
				let data = {
					pageNum: 1,
					pageSize: 300,
				}
				wx.showLoading({ title: "加载中...", mask: true })
				this.$api.getDevList(data).then(res => {
					wx.hideLoading()
					if (+res.code == 0) {
						let records = res.data.records || []
						this.devList = records
						// 重新设置app信息监听
						App.setDevList(records)
					} else {
						uni.showToast({ title: res.msg, icon: 'none', })
					}
				}).catch(err => {
					wx.hideLoading()
					uni.showToast({ title: `请求错误!`, icon: 'none', })
				}).finally(() => {

				})
			},
			async getLocation(str) {
				let res = await this.$api.getLocation({ location: str })
				if (res.code != 0 || res.data.status != 0) {
					return
				}
				let id = res.data.result.addressComponent.adcode
				let resultWath = await this.$api.getWeather({ id })
				console.log("得到参数=>", resultWath)
				let { now, location } = resultWath.data.result || {}
				let { temp = '' } = now || {}
				let { city = "", name = '' } = location || {}
				this.address = `${temp}°C    ${city}${name}`
			},
			handleClickFloat() {
				console.log("点击事件=>", )
				this.handleAddDev()
			},
			handleTabChange(index) {
				this.current = index;
			},
			handleToFamily() {
				if (!Auth.isLogin()) { return }
				let url = Tools.joinParams({ familyName: this.familyName }, '/pages/family-edit/family-edit')
				uni.navigateTo({
					url,
				})
			},
			handleToMsg(item) {
				console.log("item", item)
				let data = {
					devName: item.equipmentName,
					uuid: item.uuid
				}
				let url = Tools.joinParams(data, '/pages/message/message')
				uni.navigateTo({ url })
			},
			handleAddDev() {
				// this.goLogin()
				uni.navigateTo({
					url: '/pages/dev-add/dev-add'
				})
			},
			handleDisconnent() {
				// let app =	this.$scope;
				console.log("app", App)
				App.send()
			},
			handleInit() {
				// let app =	this.$scope;
				console.log("app", App)
				App.init()
			},
			handlePush() {
				App.publish()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 24upx
	}

	.wather-box ,.wather-img{
		// height: 30upx;
		// color: $uni-text-color-disable;
		width: 100%;
		border-radius: 16rpx;
		height: 320upx;
		// background-image: url(../../static/mp-weixin/title.jpg);
		background-size: 100% 100%;
	}

	.btn {
		width: 300upx;
		height: 80upx;
		line-height: 80upx;
		background-color: $uni-color-primary;
		border: 1upx solid $uni-color-primary;
		border-radius: 16upx;
		margin: auto;
		margin-top: 40upx;
		color: #fff;
		text-align: center;

		&:active {
			background-color: #fff;
			color: $uni-color-primary;
		}
	}

	.empty-img {
		width: 300rpx;
		height: 210rpx;
		background-size: 100% 100%;
		margin: auto;
		margin-top: 40px;
	}

	.dev-list-box {
		// display: flex;
		padding: 30upx 20upx;
		overflow: auto;
		padding-bottom: 100rpx;

		.dev-item {
			margin: 20rpx;
			padding: 7rpx;
			background-color: #fff;
			border-radius: 28rpx;

		}

	}

	.dev-item {
		padding: 6upx;
		text-align: center;
		border: 1upx solid $uni-border-color;

		.dev-icon {
			width: 100upx;
			height: 100upx;
			background-image: url(../../static/mp-weixin/suo.png);
			background-size: 100% 100%;
			margin: auto;
		}

		.icon {
			// color: $uni-color-dev;
			font-size: 100upx;
		}
	}

	.dev-name {
		color: $uni-text-color;
		padding: 3upx 0;
		font-size: 28upx;
	}
</style>
